{% extends 'base.html' %}
    {% block breadcrumb_current %}
        设备管理 > 设备调整历史记录
    {% endblock %}
{% block content %}


    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            系统仅提供最近 50 条设备调整历史记录
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end">返回首页</a></h5>
        </div>
    <div>
<div class="container mt-4">

    <!-- 表格展示，初始隐藏 -->
    <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
        <thead>
            <tr>
                <th>设备编号</th>
                <th>位置调整</th>
                <th>状态调整</th>
                <th>调整理由</th>
                <th>客户代号</th>
                <th>客户名称</th>
                <th>申请时间</th>
                <th>审批意见</th>
                <th>审批结果</th>
                <th>申请人</th>
                <th>审批人</th>
            </tr>
        </thead>
        <tbody>
            {% for history in histories %}
            <tr class="custom-row-color">
                <td>{{ history.number }}</td>
                <td>{{ history.placebefore }} > {{ history.placenow }}</td>
                <td>{{ history.get_statebefore_display }} > {{ history.get_statenow_display }}</td>
                <td>{{ history.reason }}</td>
                <td>{{ history.cust_code }}</td>
                <td>{{ history.cust_name }}</td>
                <td>{{ history.create_date|date:"Y-m-d" }}</td>
                <td>{{ history.approval_reason }}</td>
                <td>{{ history.get_approvalstatus_display }}</td>
                <td>{{ history.operator.realname }}</td>
                <td>{{ history.approver.realname }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="11">暂无已批准的设备历史记录</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 卡片展示，初始隐藏 -->
    <div id="mobile-view" style="display: none;">
        {% for history in histories %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">设备编号: {{ history.number }}</h5>
                <p class="card-text">
                    <strong>位置调整:</strong> {{ history.placebefore }} > {{ history.placenow }}<br>
                    <strong>状态调整:</strong> {{ history.get_statebefore_display }} > {{ history.get_statenow_display }}<br>
                    <strong>调整理由:</strong> {{ history.reason }}<br>
                    <strong>客户代号:</strong> {{ history.cust_code }}<br>
                    <strong>客户名称:</strong> {{ history.cust_name }}<br>
                    <strong>申请时间:</strong> {{ history.create_date|date:"Y-m-d" }}<br>
                    <strong>审批意见:</strong> {{ history.approval_reason }}<br>
                    <strong>审批结果:</strong> {{ history.get_approvalstatus_display }}<br>
                    <strong>申请人:</strong> {{ history.operator.realname }}<br>
                    <strong>审批人:</strong> {{ history.approver.realname }}
                </p>
            </div>
        </div>
        {% empty %}
        <div class="card mb-3">
            <div class="card-body text-center">
                暂无已批准的设备历史记录
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 设备检测脚本 -->
    <script>
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const desktopView = document.getElementById('desktop-view');
            const mobileView = document.getElementById('mobile-view');

            if (isMobile()) {
                mobileView.style.display = 'block';
            } else {
                desktopView.style.display = 'table';
            }
        });
    </script>
</div></div>
</div>
{% endblock %}